<template>
  <!-- 
    v-model 绑定给普通元素
      强制绑定一个value属性
      绑定一个@input事件 当input内容发生变化时 触发input事件 从而修改绑定的值

    v-model绑定给组件
      强制绑定一个 `:value="xxx"` 组件内部通过props接收
      给组件绑定一个@input自定义事件 组件内部表单发生改变时 会触发自定义的input事件 从而向父组件传值

    v-model绑定给普通表单元素:表单的数据双向绑定
    v-model绑定给组件元素:父子组件的数据双向绑定
   -->


  <div>
    <h4>v-model传值</h4>
    <div>
      <p> v-model原理 绑定给普通表单元素 count:{{count}} </p>
      <input type="text" :value="count" @input="count = +$event.target.value" >
      <input type="text" v-model="count">
    </div>

    <div>
      <p>v-model原理 绑定给组件</p>
      <child :value="count" @input="count += $event" />
      <child v-model="count" />
    </div>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      count: 0
    }
  },
  
}
</script>

<style scoped>
div{
  color:rgb(65, 179, 33);
}
</style>